<div class="card">
  <div class="card-header">
    <div class="row">
      <div class="col col-md-6">
        <h5 class="card-title"><i class="fa fa-building me-2"></i>供应商列表</h5>
      </div>
      <div class="text-end col col-md-6">
        <div class="text-lg-end pt-1">
          <!-- 批量删除按钮 -->
          <button class="btn btn-outline-danger me-2" type="button" (click)="deleteSelected()" [disabled]="selectedItems.length === 0">
            <i class="fa fa-trash me-1"></i>
            批量删除 <span *ngIf="selectedItems.length > 0">({{selectedItems.length}})</span>
          </button>
          
          <!-- 导出选中项按钮 -->
          <button class="btn btn-outline-success me-2" type="button" 
                  (click)="exportSelectedItems()" 
                  [disabled]="selectedItems.length === 0">
            <i *ngIf="isExporting" class="fa fa-spinner fa-spin me-1"></i>
            <i *ngIf="!isExporting" class="fa fa-file-excel-o me-1"></i>
            导出选中项
            <span *ngIf="selectedItems.length > 0">({{selectedItems.length}})</span>
          </button>
          
          <!-- 导出当前页按钮 -->
          <button class="btn btn-outline-success me-2" type="button" 
                  (click)="exportCurrentPage()" 
                  [disabled]="gongying.items.length === 0 || isExporting">
            <i *ngIf="isExporting" class="fa fa-spinner fa-spin me-1"></i>
            <i *ngIf="!isExporting" class="fa fa-file-excel-o me-1"></i>
            导出当前页
          </button>
          
          <!-- 导出全部按钮 -->
          <button class="btn btn-outline-success me-2" type="button" 
                  (click)="exportAllData()" 
                  [disabled]="gongying.totalCount === 0 || isExporting">
            <i *ngIf="isExporting" class="fa fa-spinner fa-spin me-1"></i>
            <i *ngIf="!isExporting" class="fa fa-file-excel-o me-1"></i>
            导出全部
          </button>
          
          <button id="create" class="btn btn-primary" type="button" (click)="openCreateModal()">
            <i class="fa fa-plus me-1"></i>
            <span>新建供应商</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 添加搜索功能 -->
  <div class="card-body border-bottom search-section">
    <form (ngSubmit)="searchGongying()" #searchForm="ngForm">
      <div class="row">
        <div class="col-md-8 col-lg-6 mb-3">
          <div class="input-group search-group">
            <span class="input-group-text bg-light border-end-0">
              <i class="fa fa-search text-muted"></i>
            </span>
            <input
              type="text"
              class="form-control border-start-0"
              placeholder="搜索供应商名称、编码或联系人..."
              [(ngModel)]="nameKeyword"
              name="nameKeyword"
            />
            <button class="btn btn-primary" type="submit">
              搜索
            </button>
            <button class="btn btn-outline-secondary" type="button" (click)="resetSearch()">
              重置
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
  
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th width="40px">
              <div class="form-check">
                <input class="form-check-input" 
                       type="checkbox" 
                       [checked]="isAllSelected" 
                       (change)="selectAll(selectAllCheckbox.checked)"
                       #selectAllCheckbox>
              </div>
            </th>
            <th>序号</th>
            <th>供应商编码</th>
            <th>供应商名称</th>
            <th>联系人</th>
            <th>电话</th>
            <th>手机</th>
            <th>地址</th>
            <th>企业属性</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let gongyingItem of gongying.items; let i = index">
            <td>
              <div class="form-check">
                <input class="form-check-input" 
                       type="checkbox" 
                       [checked]="selectedItems.includes(gongyingItem.id)" 
                       (change)="toggleItemSelection(gongyingItem.id)"
                       #rowCheckbox>
              </div>
            </td>
            <td>{{ (list.page - 1) * currentPageSize + i + 1 }}</td>
            <td><span class="badge bg-success text-white">{{ gongyingItem.supplierCode }}</span></td>
            <td>{{ gongyingItem.fullName }}</td>
            <td>{{ gongyingItem.mainContact }}</td>
            <td>{{ gongyingItem.phone }}</td>
            <td>{{ gongyingItem.mobile }}</td>
            <td>{{ gongyingItem.address }}</td>
            <td>{{ gongyingItem.enterpriseAttribute }}</td>
            <td class="action-buttons">
              <button class="btn btn-sm btn-outline-primary me-1" type="button" (click)="openEditModal(gongyingItem.id)">
                <i class="fa fa-edit"></i>
                <span class="d-none d-md-inline-block ms-1">编辑</span>
              </button>
              <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGongying(gongyingItem.id)">
                <i class="fa fa-trash"></i>
                <span class="d-none d-md-inline-block ms-1">删除</span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="card-footer">
    <div class="row">
      <div class="col-md-6">
        <!-- 分页信息 -->
        <div class="pagination-info" *ngIf="gongying.items.length > 0">
          当前显示 {{ gongying.totalCount > 0 ? ((list.page - 1) * currentPageSize) + 1 : 0 }} - {{ Math.min(list.page * currentPageSize, gongying.totalCount) }} 条，总计 {{ gongying.totalCount }} 条
        </div>
      </div>
      <div class="col-md-6">
        <!-- 分页控制 -->
        <div class="d-flex justify-content-end align-items-center">
          <!-- 每页显示数量选择 -->
          <div class="me-3">
            <label class="me-2">每页显示：</label>
            <select class="form-select form-select-sm d-inline-block" style="width: auto;" 
                    [(ngModel)]="currentPageSize" 
                    (change)="onPageSizeChange(currentPageSize)">
              <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
            </select>
          </div>
          
          <!-- 分页导航 -->
          <nav aria-label="分页导航" *ngIf="gongying.items.length > 0">
            <ul class="pagination pagination-sm mb-0">
              <!-- 首页 -->
              <li class="page-item" [class.disabled]="list.page === 1">
                <a class="page-link" href="javascript:;" (click)="goToPage(1)">
                  <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
              </li>
              
              <!-- 上一页 -->
              <li class="page-item" [class.disabled]="list.page === 1">
                <a class="page-link" href="javascript:;" (click)="goToPage(list.page - 1)">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              
              <!-- 页码按钮 -->
              <ng-container *ngFor="let page of visiblePageNumbers">
                <!-- 省略号 -->
                <li class="page-item disabled" *ngIf="page < 0">
                  <span class="page-link">...</span>
                </li>
                
                <!-- 常规页码 -->
                <li class="page-item" *ngIf="page > 0" [class.active]="list.page === page">
                  <a class="page-link" href="javascript:;" (click)="goToPage(page)">{{ page }}</a>
                </li>
              </ng-container>
              
              <!-- 下一页 -->
              <li class="page-item" [class.disabled]="list.page === maxPageCount">
                <a class="page-link" href="javascript:;" (click)="goToPage(list.page + 1)">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
              
              <!-- 尾页 -->
              <li class="page-item" [class.disabled]="list.page === maxPageCount">
                <a class="page-link" href="javascript:;" (click)="goToPage(maxPageCount)">
                  <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
          
          <!-- 页码跳转 -->
          <div class="ms-3 d-flex align-items-center" *ngIf="maxPageCount > 1">
            <span class="me-2">跳至</span>
            <input
              type="number"
              class="form-control form-control-sm"
              style="width: 60px;"
              min="1"
              [max]="maxPageCount"
              [(ngModel)]="inputPageNumber"
              (change)="onPageInputChange($event)"
              (keyup)="onPageInputKeyUp($event)"
            />
            <span class="ms-2">页</span>
            <button class="btn btn-sm btn-outline-primary ms-2" (click)="goToPage(inputPageNumber)">确定</button>
          </div>
        </div>
      </div>
    </div>

    <div *ngIf="gongying.items.length === 0" class="text-center">
      <p><i class="fa fa-info-circle me-1"></i>暂无数据</p>
    </div>
  </div>
</div>

<!-- 创建供应商模态框 -->
<div class="modal fade" [class.show]="isModalOpen" [class.d-block]="isModalOpen" tabindex="-1" role="dialog" aria-modal="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="fa" [ngClass]="isEditMode ? 'fa-edit' : 'fa-plus-circle'"></i>
          {{ isEditMode ? '编辑供应商' : '新建供应商' }}
        </h5>
        <button type="button" class="btn-close" (click)="closeModal()" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <form [formGroup]="createGongyingForm">
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="fullName" class="form-label">供应商名称<span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="fullName" formControlName="fullName">
              <div *ngIf="createGongyingForm.get('fullName').invalid && (createGongyingForm.get('fullName').dirty || createGongyingForm.get('fullName').touched)" class="text-danger">
                <small *ngIf="createGongyingForm.get('fullName').errors?.required">供应商名称不能为空</small>
                <small *ngIf="createGongyingForm.get('fullName').errors?.maxlength">供应商名称不能超过100个字符</small>
              </div>
            </div>
            <div class="col-md-6">
              <label for="mainContact" class="form-label">联系人</label>
              <input type="text" class="form-control" id="mainContact" formControlName="mainContact">
            </div>
          </div>
          
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="phone" class="form-label">电话</label>
              <input type="text" class="form-control" id="phone" formControlName="phone">
            </div>
            <div class="col-md-6">
              <label for="mobile" class="form-label">手机</label>
              <input type="text" class="form-control" id="mobile" formControlName="mobile">
            </div>
          </div>
          
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="address" class="form-label">地址</label>
              <input type="text" class="form-control" id="address" formControlName="address">
            </div>
            <div class="col-md-6">
              <label for="enterpriseAttribute" class="form-label">企业属性</label>
              <select class="form-select" id="enterpriseAttribute" formControlName="enterpriseAttribute">
                <option value="">请选择</option>
                <option *ngFor="let option of enterpriseAttributeOptions" [value]="option">{{ option }}</option>
              </select>
            </div>
          </div>
          
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="emailAddress" class="form-label">电子邮箱</label>
              <input type="email" class="form-control" id="emailAddress" formControlName="emailAddress">
              <div *ngIf="createGongyingForm.get('emailAddress').invalid && (createGongyingForm.get('emailAddress').dirty || createGongyingForm.get('emailAddress').touched)" class="text-danger">
                <small *ngIf="createGongyingForm.get('emailAddress').errors?.email">请输入有效的电子邮箱地址</small>
                <small *ngIf="createGongyingForm.get('emailAddress').errors?.maxlength">电子邮箱不能超过100个字符</small>
              </div>
            </div>
          </div>
          
          <div class="row mb-3">
            <div class="col-md-12">
              <label for="remarks" class="form-label">备注</label>
              <textarea class="form-control" id="remarks" formControlName="remarks" rows="3"></textarea>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="closeModal()">
          <i class="fa fa-times me-1"></i>取消
        </button>
        <button type="button" class="btn btn-primary" (click)="save()" [disabled]="createGongyingForm.invalid || isSaving">
          <i *ngIf="isSaving" class="fa fa-spinner fa-spin me-1"></i>
          <i *ngIf="!isSaving" class="fa fa-check me-1"></i>
          保存
        </button>
      </div>
    </div>
  </div>
</div>

<!-- 背景遮罩 -->
<div class="modal-backdrop fade show" *ngIf="isModalOpen"></div> 